<div class="component-demo">
	<h2 [id]="fragment()">
		<a routerLink="." [fragment]="fragment()" class="title-fragment" title="Anchor link to demo: {{ fragment() }}">
			<i class="bi bi-link-45deg" style="font-size: 1.75rem; color: var(--bs-heading-color)"></i>
		</a>
		<span>{{ demoTitle() }}</span>
		<button
			type="button"
			class="btn btn-sm btn-outline-secondary me-2 toggle-code"
			[class.active]="showCode()"
			(click)="showCode.set(!showCode()); trackShowCodeClick()"
		>
			<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
				<path
					d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"
				/>
			</svg>
			<span class="ms-1">Code</span>
		</button>
		@if (showStackblitz()) {
			<a
				role="button"
				(click)="trackStackBlitzClick()"
				class="stackblitz btn-sm btn btn-outline-secondary"
				target="_blank"
				href="stackblitzes/{{ component() | lowercase }}/{{ fragment() }}/stackblitz.html"
				title="Edit in StackBlitz"
			>
				<img class="stackblitz-icon" src="img/stackblitz-icon.svg" alt="StackBlitz icon" />
				StackBlitz
			</a>
		}
	</h2>
	<div class="card">
		@if (showCode()) {
			<div class="border-bottom tabset-code">
				<ul
					ngbNav
					#nav="ngbNav"
					class="nav-{{ hasManyFiles() ? 'pills' : 'tabs' }}"
					[class.d-flex]="hasManyFiles()"
					[class.flex-row]="hasManyFiles()"
					[orientation]="hasManyFiles() ? 'vertical' : 'horizontal'"
				>
					@if (filesWithSnippets().length > 0) {
						@for (file of filesWithSnippets(); track file) {
							<li ngbNavItem="{{ component() }}-{{ file.name }}-{{ $index }}">
								<a ngbNavLink>
									<span class="text-truncate" [title]="tabType(file.name)">{{ file.name }}</span>
								</a>
								<ngbd-code *ngbNavContent [snippet]="file.snippet"></ngbd-code>
							</li>
						}
					} @else {
						<li ngbNavItem="{{ component() }}-{{ fragment() }}-html">
							<a ngbNavLink>
								<span class="ms-2">{{ component() | lowercase }}-{{ fragment() }}.html</span>
							</a>
							<ngbd-code *ngbNavContent [snippet]="markupSnippet()"></ngbd-code>
						</li>
						<li ngbNavItem="{{ component() }}-{{ fragment() }}-typescript">
							<a ngbNavLink>
								<span class="ms-2">{{ component() | lowercase }}-{{ fragment() }}.ts</span>
							</a>
							<ngbd-code *ngbNavContent [snippet]="codeSnippet()"></ngbd-code>
						</li>
					}
				</ul>
				<div [ngbNavOutlet]="nav"></div>
			</div>
		}
		<div class="card-body">
			<ng-content></ng-content>
		</div>
	</div>
</div>
